<div class="middle">
  <div class="middle-header header-toolbar">
    <div class="container-fluid">
      <div class="page-header page-header-bleed-right page-header-bleed-left">
        <h1>
          Pods
          <span class="page-header-link">
            <a ng-href="{{'pods' | helpLink}}" target="_blank">
              Learn More <i class="fa fa-external-link" aria-hidden="true"></i>
            </a>
          </span>
        </h1>
      </div>
      <div ng-if="((pods | hashSize) > 0) || filterWithZeroResults" class="data-toolbar">
        <div class="data-toolbar-filter">
          <project-filter></project-filter>
        </div>
      </div>
    </div>
  </div><!-- /middle-header-->
  <div class="middle-content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div ng-if="(pods | hashSize) == 0">
            <p ng-if="!podsLoaded">
              Loading...
            </p>
            <div ng-if="podsLoaded" class="empty-state-message text-center">
              <div ng-if="!filterWithZeroResults">
                <h2>No pods.</h2>
                <p>No pods have been added to project {{projectName}}.</p>
              </div>
              <div ng-if="filterWithZeroResults">
                <h2>The filter is hiding all pods. <button type="button" class="btn btn-link inline-btn-link" ng-click="clearFilter()">Clear All Filters</button></h2>
              </div>
            </div>
          </div>
          <pods-table ng-if="(pods | hashSize) > 0" pods="pods"></pods-table>
        </div><!-- /col-* -->
      </div>
    </div>
  </div><!-- /middle-content -->
</div>
